<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            text-align: center;
        }

        #test1{
            width: 400px;
            height: 40px;
            border: 1px solid #ccc;
            outline: none;
        }

        #box1{
            width: 400px;
            height: 40px;
            border: 1px solid #333;
            margin: 0 auto;
            font-size: 30px;
        }

        #box{
            width: 500px;
            margin: 10px auto;
            text-align: left;
        }

        #box2{
            width: 400px;
            height: 40px;
            /* border: 1px solid #333; */
            margin: 10px auto;
            font-size: 30px;
        }

        form input[name="bank"]{
            margin-left: 49px;
        }
    </style>
</head>
<body>
    <!--  
        1. 表单事件
            onfocus    获取焦点时
            onblur     失去焦点时
            onchange   当表单内容发生改变时
            oninput    当输入时
            onselect   选中(框中)内容时
            onsubmit   当提交表单时

        2. 根据 name 获取表单对象
            * name 唯一
                * document.getElementsByName(name名)      获得 节点列表 NodeList
                * document.name名                           获得 一个表单对象
                                     
            * name 不唯一
                * document.getElementsByName(name名)      获得 节点列表 NodeList
                * document.name名                           获得 HTML集合 HTMLCollection 
            

    -->
    <input type="text" id="test1">
    <script>
        var test1 = document.getElementById('test1');

        test1.onfocus = function(){
            this.style.borderColor = 'blue';
        }

        test1.onblur = function(){
            this.style.borderColor = '#ccc';
        }
    </script>

    
    <form action="" name="address">
        <select name="province" id="">
            <option value="">江苏</option>            
            <option value="">安徽</option>            
            <option value="">浙江</option>            
            <option value="">山东</option>            
            <option value="">山西</option>            
            <option value="">福建</option>            
            <option value="">湖北</option>            
            <option value="">湖南</option>            
        </select>
    </form>
    <div id="box1"></div>


    <!-- <form action="" name="address"></form> -->
    
    <script>
        // 根据 name 获取表单对象
            // var add = document.getElementsByName('address');
            // console.log(add);
            // console.log(add[0]);

            // var add = document.address;
            // console.log(add);


        // 子级name 
            // var select = document.address[0].province;   // address 有多个的情况, 必须说明第几个索引
            // var select = document.address.province;     // address 唯一的情况, 直接写, 不需要说明索引
            // console.log(select);

        var pro = document.address.province; 
        var box1 = document.getElementById('box1');

        box1.innerHTML = pro[0].innerHTML;

        pro.onchange = function(){
            var index = this.selectedIndex;
            var content = this[index].innerHTML;

            box1.innerHTML = content;
        }
    </script>
    <hr>



    <div id="box">
        <div id="box2"></div>
        <form action="" name="form">
            <input type="text" name="bank">
        </form>
    </div>

    <script>
        var box2 = document.getElementById('box2');
        var bank = document.form.bank;

        bank.oninput = function(){
            var content = this.value; 

            box2.innerHTML = content;
        }
    </script>
    <hr>

    
    <form action="" name="form2">
        <input type="text" name="text">
    </form>
    <script>
        var text = document.form2.text;

        text.onselect = function(){
            // 输出当前框中的文本
            console.log( window.getSelection().toString() );
        }
    </script>


    <form action="" name="form3">
        <p>账号: <input type="text" name="userName"></p>
        <p>密码: <input type="password" name="pwd"></p>
        <input type="submit">
    </form>

    <script>
        var form3 = document.form3;

        form3.onsubmit = function(){
            // 对账号, 密码进行验证 (验证就在本地浏览器中执行, 分担服务器的压力)

            // return false; // 禁止提交
            return true;     // 允许提交
        }


    </script>




    





</body>
</html>